<template>
    <div class="view">
        <android-nav-bar title="现金积分充值" v-on:back="back"></android-nav-bar>
        <div class="box">
            <div class="recharge-box">
                <div class="title">快捷充值</div>
                <div class="recharge-quick">
                    <div class="recharge-quick-item" @click="quickRecherge(amount)" v-for="amount in amountList">{{amount}}</div>
                </div>
                <div class="title">充值金额</div>
                <div class="amount">
                    <div class="rmb-sign">￥</div>
                    <input class="rmb-number" type="number" v-model="amount">
                </div>
                <!--                <div class="recharge-type">-->
                <!--                    <cube-radio-group v-model="rechargeTypeSel" :options="options" />-->
                <!--                    <svg class="svg-icon weixin" aria-hidden="true">-->
                <!--                        <use xlink:href="#icon-weixin"></use>-->
                <!--                    </svg>-->
                <!--                    <svg class="svg-icon zhifubao" aria-hidden="true">-->
                <!--                        <use xlink:href="#icon-zhifubao"></use>-->
                <!--                    </svg>-->
                <!--                </div>-->

                <div class="recharge" @click="toRecharge">下一步</div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Vue, Watch} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";

    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";
    import CommonUnit from "@/unit/CommonUnit";
    import {updateUser} from "@/store/dispatches";
    import UserEntity from "@/entity/UserEntity";
    import AndroidNavBar from "@/components/aui/AndroidNavBar.vue";

    @Component({
        components: {
            AndroidNavBar
        }
    })
    export default class MineMoneyRecharge extends Scene {
        private publicPath: string = process.env.BASE_URL;
        private rechargeTypeSel: number = 1;
        private amountList: number[] = [50, 100, 500, 1000];
        @State("UserStore")
        public user!: InterfaceUser;
        private amount: number | "" = "";

        protected get options(): Array<any> {
            return [
                {
                    label: "微信",
                    value: 1
                },
                {
                    label: "支付宝",
                    value: 2
                }
            ];
        }

        private back(): void {
            this.navigateBack();
        }

        private toPage(name: string, query: any = {}): any {
            this.navigateTo({
                name: name,
                query: query
            });
        }

        private mounted(): void {

        }

        private quickRecherge(amunt: number): void {
            this.amount = amunt;
            this.$nextTick(() => {
                this.toRecharge();
            });
        }

        private toRecharge(): void {
            let toast = (<any> this).$createToast({
                time: 0,
                txt: "生成订单中...",
                mask: true
            }).show();
            if (Number(this.amount) > 0) {
                Http.post(this.api.recharge, {amount: this.amount}, {token: this.user.token}).then((res) => {
                    if (res.code === 1) {
                        this.redirectTo({
                            name: "orderChannel",
                            query: {
                                orderIds: res.data.id.join(","),
                                orderType: "recharge"
                            }

                        });
                    } else {
                        toast = (<any> this).$createToast({
                            txt: `${res.msg}`,
                            mask: true,
                            type: "error",
                            time: 3000,
                            onTimeout: () => {
                                this.globalSingleResultToast(res);
                            }
                        }).show();
                    }
                }).catch(() => {
                    toast = (<any> this).$createToast({
                        txt: "系统错误，请稍后",
                        mask: true,
                        type: "error",
                        time: 3000,
                    }).show();
                });
            }

        }

    }
</script>

<style scoped lang="stylus">
    .view
        position relative;
        width 100vw;
        height 100vh;
        background $theme-page-common-background-color;
        overflow hidden

        .box
            margin-top calc(var(--safe-area-inset-top) + 47px);
            height calc(100vh - var(--safe-area-inset-top) - 47px);

            &::before
                display table;
                content '';

            .recharge-box
                margin 20px 12px;
                padding 15px;
                background-color #fff;
                border-radius 10px;
                position relative;

                .title
                    font-size 13px;
                    color #666


                .amount
                    padding 20px 10px 0 10px;
                    font-size 22px;
                    height 70px;
                    position relative;
                    display flex;
                    /*justify-content center;*/
                    align-items center;
                    color #333;

                    .rmb-sign
                        flex 0 0 30px;
                        line-height 40px;
                        font-size 18px;
                        height 40px;

                    .rmb-number
                        flex 1;
                        height 40px;


                    &:after
                        content ''
                        display block;
                        position absolute;
                        left 6px;
                        right 6px;
                        height 1px;
                        background #eee;
                        transform translateY(.5)
                        bottom 0;

                .recharge-type
                    position relative;

                    svg
                        position absolute;
                        right 20px;
                        font-size 24px;
                        z-index 10;

                    .weixin
                        top 10px;

                    .zhifubao
                        bottom 10px;

                .recharge-quick
                    margin 20px 12px;
                    display flex;
                    flex-wrap wrap;
                    justify-content space-between;

                    .recharge-quick-item
                        width 135px;
                        height 45px;
                        margin-bottom 20px;
                        background $theme-advancing-color
                        border-radius 7px;
                        text-align center;
                        font-size 17px;
                        line-height 45px;
                        color #fff;

                        &:after
                            content '元';
                            font-size 12px;
                            padding-left 3px;


                .recharge
                    color #fff;
                    height 45px;
                    line-height 45px;
                    text-align center;
                    border-radius 200px;
                    margin 20px 30px;
                    background linear-gradient(to right, rgba(254, 124, 79, .6), rgba(255, 89, 163, .6));


</style>
